<template>
    <div class="app-container">

        <el-card class="box-card card_padding0">
            <div class="card_header">
                <div style="height: 32px">
                    <el-button
                            :type="year > 2020? 'primary' : 'info'"
                            :disabled="year > 2020? false : true"
                            style="float: left"
                            size="small"
                            @click="beforeYear"
                            icon="el-icon-arrow-left">上 一 年
                    </el-button>
                    <b style="line-height: 32px">{{year}} 年</b>
                    <el-button
                            :type="year>(new Date().getFullYear())? 'info' : 'primary'"
                            :disabled="year>(new Date().getFullYear())? true : false"
                            size="small"
                            @click="nextYear"
                            style="float: right">下 一 年
                        <i class="el-icon-arrow-right el-icon--right"></i>
                    </el-button>
                </div>

            </div>
            <div style="display: flex; flex-wrap: wrap" class="body-div">

                <el-card
                        v-for="(month,monthIndex) in months"
                        :key="monthIndex"
                        style=" width: 393px;height: 400px;margin: 10px;"
                        class="box-card">
                    <div slot="header" class="clearfix" style="text-align: center;">
                        <b>{{ monthNames[new Date(month[0].sunday.date).getMonth()]+ ' 月' }}</b>
                    </div>

                    <el-table
                            :data="month"
                            border
                            style="width: 100%;margin-top: -20px">
                        <el-table-column
                                v-for="(weekDay,index) in weekDays"
                                :key="index"
                                prop="one"
                                :label="weekDayNames[index]"
                                align="center"
                                header-align="center"
                                width="50">
                            <template slot-scope="scope" v-if="scope.row[weekDay]">
                                <el-popover
                                        popper-class="popper_wrapper"
                                        placement="top"
                                        trigger="hover"
                                        :key="key.popover_key"
                                        :v-model="'visible.visible'+scope.row[weekDay].id"
                                        width="170">
                                    <div class="popover1" >
                                        {{ getNowTimeByDate(scope.row[weekDay].date) }}
                                        <!-- <el-button
                                                circle
                                                size="mini"
                                                icon="el-icon-delete"
                                                @click="clearHoliDay(scope.row[weekDay])"
                                                :disabled="new Date(scope.row[weekDay].date) >= new Date(new Date().toLocaleDateString()) ? false : true"
                                                style="margin-left: 12px">
                                        </el-button> -->
                                    </div>
                                    <div style="display: flex;justify-content: space-between;">
                                        <el-button
                                                :disabled="new Date(scope.row[weekDay].date) >= new Date(new Date().toLocaleDateString()) ? false : true"
                                                size="mini"
                                                :class="{selectedBtn: new Date(scope.row[weekDay].date) >= new Date(new Date().toLocaleDateString()),
                                                        selectedBtnDisabled: !(new Date(scope.row[weekDay].date) >= new Date(new Date().toLocaleDateString()))}"
                                                @click="toHoliDay(scope.row[weekDay])">节假日
                                        </el-button>
                                        <el-button
                                                :disabled="new Date(scope.row[weekDay].date) >= new Date(new Date().toLocaleDateString()) ? false : true"
                                                size="mini"
                                                :class="{selectedBtn: new Date(scope.row[weekDay].date) >= new Date(new Date().toLocaleDateString()),
                                                        selectedBtnDisabled: !(new Date(scope.row[weekDay].date) >= new Date(new Date().toLocaleDateString()))}"
                                                @click="toWorkDay(scope.row[weekDay])">工作日
                                        </el-button>
                                    </div>
                                    <div
                                      slot="reference" class="td-div"
                                      :style="{backgroundColor: getBackGroundColor(scope.row[weekDay]), color: getFontColor(scope.row[weekDay]), cursor: 'pointer',borderRadius:'50%',width:'30px',height:'30px',lineHeight: '30px'}"
                                      :class="{
                                        currentDay: !!getBackGroundColor(scope.row[weekDay].isCurrentDay)
                                      }"
                                    >
                                        {{
                                            scope.row[weekDay] == null ? null : new Date(scope.row[weekDay].date).getDate()
                                        }}
                                    </div>
                                </el-popover>
                            </template>
                        </el-table-column>

                    </el-table>
                </el-card>
            </div>

            <div v-if="false" class="submet-div">
                <el-button
                        type="primary"
                        @click="submitCustomHolidays">提交
                </el-button>
            </div>

        </el-card>


    </div>

</template>

<script>


import {http_holiday_list,http_holiday_submit} from '@/api/holiday'
import {Message} from "element-ui";


export default {
    data() {
        return {
            visible: [],
            popover_key: new Date().getTime(),
            months: [],
            weekDays: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
            weekDayNames: ['一', '二', '三', '四', '五', '六', '日'],
            monthNames: ['一', '二', '三', '四', '五', '六', '七','八','九','十','十一','十二'],
            customHolidays:[],
            key:[],
            year: new Date().getFullYear(),
            changeDayIds: []
        }
    },
    methods: {
        http_list(type) {
            http_holiday_list(this.year).then(result => {
                const {success,data} = result
                if (success){
                    this.months = data
                    this.changeDayIds = []
                    this.months.forEach(month=>{
                        month.forEach(weeks=>{
                            this.weekDays.forEach(w=>{
                                if (weeks[w] != null){
                                    weeks[w].customHolidayFlag = weeks[w].customHoliday
                                }
                            })
                        })
                    })
                }else {
                    if (type === 0){
                        this.year ++
                    }else if (type === 1) {
                        this.year --
                    }
                }
            }).catch(error=>{
                if (type === 0){
                    this.year ++
                }else if (type === 1) {
                    this.year --
                }
            })
        },
        http_save(params){
            http_holiday_submit(params).then(result=>{
                const {success, message} = result
                if (success){
                    Message.success(message)
                    this.http_list()
                }else {
                    Message.error(message)
                }
            });
        },
        getNowTimeByDate(date1) {
            let now = new Date(date1)
            let year = now.getFullYear(); //得到年份
            let month = now.getMonth(); //得到月份
            let date = now.getDate(); //得到日期
            month = month + 1;
            month = month.toString().padStart(2, "0");
            date = date.toString().padStart(2, "0");
            let defaultDate = `${year}-${month}-${date}`;
            return defaultDate;
        },
        getWeekDayName(weekIndex) {
            if (weekIndex == 0) return 'monday'
            if (weekIndex == 1) return 'tuesday'
            if (weekIndex == 2) return 'wednesday'
            if (weekIndex == 3) return 'thursday'
            if (weekIndex == 4) return 'friday'
            if (weekIndex == 5) return 'saturday'
            if (weekIndex == 6) return 'sunday'
        },
        clearHoliDay(day){
            // console.log(day)
            day.customHoliday = null
            this.key.popover_key = new Date().getTime()
            // this.setChangeDays(day)
            this.http_save([day])
        },
        toHoliDay(day){
            day.customHoliday = 2
            this.key.popover_key = new Date().getTime()
            // this.setChangeDays(day)
            this.http_save([day])
        },
        toWorkDay(day){
            day.customHoliday = 1
            this.key.popover_key = new Date().getTime()
            // this.setChangeDays(day)
            this.http_save([day])
        },
        setChangeDays(day){
            if (day.customHoliday != day.customHolidayFlag) {
                if (this.changeDayIds.indexOf(day.id) == -1){
                    this.changeDayIds.push(day.id)
                }
            }else {
                let index = this.changeDayIds.indexOf(day.id)
                // console.log(index)
                if (index != -1){
                    this.changeDayIds.splice(index,1)
                }
            }
            // console.log(this.changeDayIds)
        },
        submitCustomHolidays(){
            let customHolidays = []
            this.months.forEach(month=>{
                month.forEach(weeks=>{
                    this.weekDays.forEach(w=>{
                        if (weeks[w] != null){
                            if (weeks[w].customHoliday != null){
                                customHolidays.push(weeks[w])
                            }
                        }
                    })
                })
            })
            console.log("customHolidays:",customHolidays)
            // this.http_save(customHolidays)

        },
        beforeYear(){
            if (this.changeDayIds.length != 0){
                this.promptBox(0)
            }else {
                this.year--
                this.http_list(0)
            }
        },
        nextYear(){
            if (this.changeDayIds.length != 0){
                this.promptBox(1)
            }else {
                this.year++
                this.http_list(1)
            }

        },
        promptBox(type) {
            this.$confirm('你修改了今年的节假日，将提交你的修改，再跳转。。。', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.submitCustomHolidays()
                if (type == 0) this.year--
                if (type == 1) this.year++
                this.http_list(type)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        getBackGroundColor(day) {
            let flag = '工作日'
            if (day != null) {
                if (day.customHoliday != null) {
                    if (day.customHoliday == 1) {
                        flag = '自定义上班'
                    } else if (day.customHoliday == 2) {
                        flag = '自定义假日'
                    }
                } else if (day.holiday != null) {
                    if (day.holiday == 2) {
                        flag = '国假'
                    } else if (day.holiday == 4) {
                        flag = '周末'
                    }
                }
                switch (flag) {
                    case '工作日':
                        return 'white'
                    case '自定义上班':
                        return 'white'
                    case '自定义假日':
                        return 'white'
                    case '国假':
                        return '#F8F8F8'
                    case '周末':
                        return 'white'
                    default:
                        return 'white'
                }
            }
        },
      getFontColor(day) {
        let flag = '工作日'
        if (day != null) {
          if (day.customHoliday != null) {
            if (day.customHoliday == 1) {
              flag = '自定义上班'
            } else if (day.customHoliday == 2) {
              flag = '自定义假日'
            }
          } else if (day.holiday != null) {
            if (day.holiday == 2) {
              flag = '国假'
            } else if (day.holiday == 4) {
              flag = '周末'
            }
          }
          switch (flag) {
            case '工作日':
              return '#000000'
            case '自定义上班':
              return '#000000'
            case '自定义假日':
              return 'rgba(0,0,0,0.25)'
            case '国假':
              return 'rgba(0,0,0,0.25)'
            case '周末':
              return 'rgba(0,0,0,0.25)'
            default:
              return '#000000'

          }
        }
      },
    },
    created() {
        this.http_list()

    }


}


</script>


<style type="text/css" scoped>
.text {
    font-size: 14px;
}
.currentDay{
  width: 30px;
  height: 30px;
  background: white;
  border: 1px solid #409EFF !important;
  border-radius: 50%;
  color: #409EFF !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.selected{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #409EFF !important;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white !important;
}
.item {
    margin-bottom: 18px;
}
.td-div{
  align-self: center;
}
.td-div:hover{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #409EFF !important;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white !important;
  /*margin-right: 7px;*/
  /*margin-left: 2px;*/
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 100%;
}


.card_padding0 {
    padding: 0px;
}


.month-header {
    text-align: center;
    width: 350px;
    height: 45px;
    margin-top: 5px;
    line-height: 45px;
    border: 1px solid #EBEEF5
}

</style>

<style lang="less" scoped>

.selectedBtn{
  border: 1px solid #409EFF;
  color: #409EFF;
}
.selectedBtn:hover{
  background: #409EFF;
  color: white;
}
.selectedBtnDisabled{
  background: #F8F8F8;
  border: 1px solid #D8D8D8;
  border-radius: 4px;
  color: rgba(0,0,0,0.25);
}
.selectedBtnDisabled:hover{
  background: #F8F8F8;
  border: 1px solid #D8D8D8;
  border-radius: 4px;
  color: rgba(0,0,0,0.25);
}


.popover1{
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px
}


/deep/.el-card__header {
    background-color: #2F4056;
    color: white;
    font-size: 18px;

}
/deep/ .el-table .cell{
  width: 49px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
}
/deep/ .el-table td, .el-table th{
  padding: 6px 0;
}
/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td{
  background-color: initial;
}
.popper_wrapper{
  /deep/ .el-button--info.is-disabled, .el-button--info.is-disabled:active, .el-button--info.is-disabled:focus, .el-button--info.is-disabled:hover{
    color: rgba(0,0,0,0.25);;
    background-color: #F8F8F8;
    border-color: #D8D8D8;
    /*background: #F8F8F8;*/
    /*border: 1px solid #D8D8D8;*/
  }
}
.card_header{
    font-size: 24px;
    padding: 18px 20px;
    border-bottom: 1px solid #EBEEF5;
    /*-webkit-box-sizing: border-box;*/
    box-sizing: border-box;
    margin-top: -20px;
    margin-bottom: 20px;
    text-align: center;
}

.submet-div{
    border-top:1px solid lightgrey;
    margin:40px 0px 0px 0px;
    padding: 20px;
    text-align: right
}


</style>
